<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SQL转Word三线表 - 测试页面</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    body {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .note {
      background-color: #f8f9fa;
      border-left: 4px solid #007bff;
      padding: 10px 15px;
      margin: 20px 0;
      font-size: 14px;
      color: #555;
    }
    
    .test-button {
      margin-top: 20px;
      text-align: center;
    }
    
    .test-button button {
      background-color: #28a745;
      font-size: 16px;
      padding: 12px 24px;
    }
    
    .test-button button:hover {
      background-color: #218838;
    }
    
    .example-sql {
      font-family: monospace;
      background-color: #f5f5f5;
      padding: 15px;
      margin-top: 20px;
      border-radius: 4px;
      white-space: pre-wrap;
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <h1>SQL转Word三线表 - 测试页面</h1>
  
  <div class="note">
    这是一个测试页面，用于在不安装浏览器插件的情况下测试核心功能。<br>
    实际使用时，建议安装为浏览器插件以获得更好的体验。
  </div>
  
  <div class="container">
    <div class="upload-section">
      <h2>上传SQL文件</h2>
      <input type="file" id="sqlFileInput" accept=".sql">
      <div class="or-divider">或</div>
    </div>
    
    <div class="input-section">
      <h2>直接输入SQL语句</h2>
      <textarea id="sqlInput" placeholder="在此粘贴SQL创建表语句..."></textarea>
      
      <div class="test-button">
        <button id="loadExampleButton">加载示例SQL</button>
      </div>
    </div>
    
    <div class="button-section">
      <button id="parseButton">解析SQL</button>
    </div>
    
    <div class="result-section" id="resultSection" style="display: none;">
      <h2>解析结果</h2>
      <div id="tableResult"></div>
      
      <div class="column-selection-container">
        <div class="column-selection-header">
        </div>
        
        <div class="column-selection-layout">
          <div class="column-selection-content">
            <h2>选择列名</h2>
            <div class="column-selection">
              <div class="column-option"><input type="checkbox" id="col-field-name" checked> <label for="col-field-name">字段名</label></div>
              <div class="column-option"><input type="checkbox" id="col-type" checked> <label for="col-type">类型</label></div>
              <div class="column-option"><input type="checkbox" id="col-nullable" checked> <label for="col-nullable">是否为空</label></div>
              <div class="column-option"><input type="checkbox" id="col-key" checked> <label for="col-key">索引</label></div>
              <div class="column-option"><input type="checkbox" id="col-default" checked> <label for="col-default">默认值</label></div>
              <div class="column-option"><input type="checkbox" id="col-comment" checked> <label for="col-comment">说明</label></div>
            </div>
          </div>
          
          <div class="column-selection-buttons">
            <button id="selectAllColumnsButton" class="selection-button">全选</button>
            <button id="unselectAllColumnsButton" class="selection-button">全不选</button>
          </div>
        </div>
      </div>
      
      <div class="doc-generate-section">
        <button id="generateDocButton">生成Word文档</button>
      </div>
    </div>
  </div>
  
  <!-- 引入docx.js库的CDN -->
  <script src="https://unpkg.com/docx@7.8.2/build/index.js"></script>
  <script src="lib/sql-parser.js"></script>
  <script src="lib/docx.js"></script>
  <script src="popup.js"></script>
  <script>
    // 添加示例SQL加载功能
    document.addEventListener('DOMContentLoaded', function() {
      const loadExampleButton = document.getElementById('loadExampleButton');
      const sqlInput = document.getElementById('sqlInput');
      
      loadExampleButton.addEventListener('click', function() {
        // 示例SQL语句
        const exampleSQL = `CREATE TABLE \`user_roles\` (
  \`adminuser_id\` int(11) NOT NULL COMMENT '管理员编号',
  \`role_id\` int(11) NOT NULL COMMENT '角色编号',
  \`created_at\` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  \`updated_at\` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (\`adminuser_id\`,\`role_id\`),
  KEY \`role_id\` (\`role_id\`),
  CONSTRAINT \`user_roles_ibfk_1\` FOREIGN KEY (\`adminuser_id\`) REFERENCES \`admin_users\` (\`id\`) ON DELETE CASCADE,
  CONSTRAINT \`user_roles_ibfk_2\` FOREIGN KEY (\`role_id\`) REFERENCES \`roles\` (\`id\`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户角色关联表';`;
        
        sqlInput.value = exampleSQL;
      });
    });
  </script>
</body>
</html> 